<template>
  <div class="task-container">
    <h1>任务清单</h1>
    
    <!-- 任务添加表单 -->
    <div class="task-form">
      <input
        v-model="newTaskTitle"
        type="text"
        placeholder="输入新任务..."
        @keyup.enter="addNewTask"
        class="task-input"
      />
      <button @click="addNewTask" class="add-button">添加任务</button>
    </div>
    
    <!-- 任务统计 -->
    <div class="task-stats">
      <p>总任务数: {{ totalTasks }}</p>
      <p>已完成: {{ completedTasks }}</p>
      <p>未完成: {{ uncompletedTasks }}</p>
    </div>
    
    <!-- 任务列表 -->
    <ul class="task-list" v-if="tasks.length > 0">
      <li v-for="task in tasks" :key="task.id" class="task-item">
        <input
          type="checkbox"
          :checked="task.completed"
          @change="toggleTaskStatus(task.id)"
          class="task-checkbox"
        />
        <span :class="{ 'task-completed': task.completed }" class="task-title">
          {{ task.title }}
        </span>
        <button @click="deleteTask(task.id)" class="delete-button">删除</button>
      </li>
    </ul>
    
    <!-- 空状态提示 -->
    <div v-else class="empty-state">
      <p>暂无任务，快来添加第一个任务吧！</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { storeToRefs } from 'pinia';
import { useTaskStore } from '../stores/taskStore';

const taskStore = useTaskStore();
const newTaskTitle = ref('');

// 使用storeToRefs保持响应性
const { 
  tasks, 
  totalTasks, 
  completedTasks, 
  uncompletedTasks
} = storeToRefs(taskStore);

// 直接使用store的方法
const { 
  addTask,
  deleteTask,
  toggleTaskStatus
} = taskStore;

// 添加新任务的方法
function addNewTask() {
  const trimmedTitle = newTaskTitle.value.trim();
  if (trimmedTitle) {
    addTask(trimmedTitle);
    newTaskTitle.value = '';
  }
}
</script>

<style scoped>
.task-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

h1 {
  text-align: center;
  color: #333;
  margin-bottom: 30px;
}

.task-form {
  display: flex;
  margin-bottom: 20px;
}

.task-input {
  flex-grow: 1;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
  outline: none;
}

.task-input:focus {
  border-color: #42b983;
}

.add-button {
  padding: 10px 20px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  font-size: 16px;
  cursor: pointer;
}

.add-button:hover {
  background-color: #3aa876;
}

.task-stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.task-stats p {
  margin: 0;
  color: #666;
}

.task-list {
  list-style-type: none;
  padding: 0;
}

.task-item {
  display: flex;
  align-items: center;
  padding: 15px;
  margin-bottom: 10px;
  background-color: #f9f9f9;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.task-item:hover {
  background-color: #f1f1f1;
}

.task-checkbox {
  margin-right: 10px;
  width: 18px;
  height: 18px;
}

.task-title {
  flex-grow: 1;
  font-size: 16px;
}

.task-completed {
  text-decoration: line-through;
  color: #888;
}

.delete-button {
  padding: 5px 15px;
  background-color: #ff4757;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.delete-button:hover {
  background-color: #ff3742;
}

.empty-state {
  text-align: center;
  color: #888;
  padding: 40px;
  background-color: #f9f9f9;
  border-radius: 4px;
}
</style>